import { ref, markRaw } from 'vue';
import { openPage } from '@u/window/index';
import { getSelectLabel } from '@u/filterData/index';
import { Select, OptionsItem } from '@com/Select/index';
import { FileUpLoad } from '@com/File/index';
import type { DialogFormItem, FormItem } from '@com/Form/index';
import type { TableConfigItem } from '@com/Table/index';
import { getUserList, getProjectTypeList } from '@/mock/getOptionData';

// 项目类型list
const projectTypeList = ref<OptionsItem[]>([]);

//使用人员list
const userList = ref<OptionsItem[]>([]);

const stateList: OptionsItem[] = [
  { value: '1', label: '已完成' },
  { value: '0', label: '未完成' },
];

const firstList: OptionsItem[] = [
  { value: '01', label: '湖北' },
  { value: '02', label: '湖南' },
];

const secondListAll: OptionsItem[] = [
  { value: '0101', label: '武汉市', pid: '01' },
  { value: '0102', label: '咸宁市', pid: '01' },
  { value: '0103', label: '十堰市', pid: '01' },
  { value: '0104', label: '宜昌市', pid: '01' },
  { value: '0201', label: '长沙市', pid: '02' },
  { value: '0202', label: '岳阳市', pid: '02' },
  { value: '0203', label: '益阳市', pid: '02' },
];
const secondList = ref<OptionsItem[]>([]);
secondList.value = secondListAll;

const searchSecondList = ref<OptionsItem[]>([]);
searchSecondList.value = secondListAll;

export const initOptionData = () => {
  //请求人员数据
  getUserList().then((res) => {
    userList.value = res.result;
  });

  //请求项目类型数据
  getProjectTypeList().then((res) => {
    projectTypeList.value = res.result;
  });
};

export const tableConifg = ref<TableConfigItem[]>([
  {
    label: '项目名称(config配置)',
    prop: 'projectName',
    width: 200,
    isOpenView: true, //是否能打开详情弹窗
    render: (data) => {
      return <div className="view-link">{data.projectName}</div>;
    },
  },
  {
    label: '项目名称(插槽触发)',
    prop: 'projectName',
    width: 200,
  },
  {
    label: '项目类型',
    prop: 'projectTypeName',
    width: 130,
  },
  {
    label: '项目地址',
    prop: 'address',
    width: 240,
    render: (data) => {
      return <div onClick={() => openPage(data.address)}>{data.address}</div>;
    },
  },
  {
    label: '使用人员',
    prop: 'userArr',

    width: 200,
    render: (data) => {
      return getSelectLabel(data.userArr, userList.value);
    },
  },
  {
    label: '上传日期',
    prop: 'uploadTime',
    width: 150,
  },
  {
    label: '生效时间',
    prop: 'uploadTimeArr',
    width: 250,
    render: (data) =>
      data?.uploadTimeArr && data.uploadTimeArr.length
        ? `${data.uploadTimeArr[0]} 至 ${data.uploadTimeArr[1]}`
        : '',
  },
  {
    label: '状态',
    prop: 'state',
    width: 120,
    render: (data) => getSelectLabel(data.state, stateList),
  },
  {
    label: '部门',
    prop: 'dep',
    children: [
      {
        label: '一级部门',
        prop: 'firstDep',
        width: 120,
        render: (data) => getSelectLabel(data.firstDep, firstList),
      },
      {
        label: '二级部门',
        prop: 'secondDep',
        width: 120,
        render: (data) => getSelectLabel(data.secondDep, secondListAll),
      },
      {
        label: '三级级部门',
        prop: 'secondDep',
        width: 120,
        children: [
          {
            label: '区级部门',
            prop: 'firstDep',
            width: 120,
          },
          {
            label: '区级部门编码',
            prop: 'secondDep',
            width: 120,
          },
        ],
      },
    ],
  },

  {
    label: '备注',
    prop: 'mark',
    width: 200,
  },
  {
    label: '附件',
    prop: 'files',
    width: 350,
    render: () => {
      return '附件';
    },
  },
]);

export const dialogFormConifg = ref<DialogFormItem[]>([
  {
    row: [
      {
        label: '项目名称',
        prop: 'projectName',
        component: 'el-input',
        rules: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur',
          },
        ],
      },
    ],
  },
  {
    row: [
      {
        label: '项目类型',
        prop: 'projectType',
        component: markRaw(Select),
        defaultValue: '2',
        attrs: {
          options: projectTypeList,
        },
        rules: [
          {
            required: true,
            message: '请选择项目类型',
            trigger: 'blur',
          },
        ],
      },
      {
        label: '项目地址',
        prop: 'address',
        component: 'el-input',
        rules: [
          {
            required: true,
            message: '请输入项目地址',
            trigger: 'blur',
          },
        ],
      },
    ],
  },
  {
    row: [
      {
        label: '使用人员',
        prop: 'userArr',
        component: markRaw(Select),
        defaultValue: ['1', '2'],
        attrs: {
          options: userList,
          multiple: true,
        },
      },
      {
        label: '状态',
        prop: 'state',
        component: markRaw(Select),
        attrs: {
          options: stateList,
        },
      },
    ],
  },
  {
    row: [
      {
        label: '上传日期',
        prop: 'uploadTime',
        component: 'el-date-picker',
        rules: [
          {
            required: true,
            message: '请选择上传日期',
            trigger: 'change',
          },
        ],
        attrs: {
          placeholder: '请选择日期',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
        change: (val, formData) => {
          console.log('data change', val, formData);
        },
      },
      {
        label: '生效时间',
        prop: 'uploadTimeArr',
        component: 'el-date-picker',
        attrs: {
          placeholder: '请选择日期',
          type: 'daterange',
          rangeSeparator: '~',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
      },
    ],
  },
  {
    row: [
      {
        label: '一级部门',
        prop: 'firstDep',
        component: markRaw(Select),
        attrs: {
          options: firstList,
        },
        change: (val, formData) => {
          secondList.value = secondListAll.filter((item) => item.pid === val);
          formData.secondDep = secondList.value[0].value;
        },
      },
      {
        label: '二级部门',
        prop: 'secondDep',
        component: markRaw(Select),
        attrs: {
          options: secondList,
        },
      },
    ],
  },
  {
    row: [
      {
        label: '备注',
        prop: 'mark',
        component: 'el-input',
        attrs: {
          type: 'textarea',
          rows: '2',
        },
      },
    ],
  },
  {
    row: [
      {
        label: '附件',
        prop: 'files',
        component: markRaw(FileUpLoad),
        isShow: (formData) => formData.state === '1',
      },
    ],
  },
]);

export const searchFormConifg = ref<FormItem[]>([
  {
    label: '项目名称',
    prop: 'projectName',
    component: 'el-input',
  },
  {
    label: '项目类型',
    prop: 'projectType',
    component: markRaw(Select),
    attrs: {
      options: projectTypeList,
    },
  },
  {
    label: '状态',
    prop: 'state',
    component: markRaw(Select),
    attrs: {
      options: stateList,
    },
  },
  {
    label: '上传日期',
    prop: 'uploadTime',
    component: 'el-date-picker',
    attrs: {
      placeholder: '请选择日期',
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    label: '生效时间',
    prop: 'uploadTimeArr',
    component: 'el-date-picker',
    attrs: {
      placeholder: '请选择日期',
      type: 'daterange',
      rangeSeparator: '~',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    label: '一级部门',
    prop: 'firstDep',
    component: markRaw(Select),
    attrs: {
      options: firstList,
    },
    change: (val, formData) => {
      searchSecondList.value = secondListAll.filter((item) => item.pid === val);
      formData.secondDep = searchSecondList.value[0].value;
    },
  },
  {
    label: '二级部门',
    prop: 'secondDep',
    component: markRaw(Select),
    attrs: {
      options: searchSecondList,
    },
  },
]);
